<template>
  <div>
    <el-card shadow="never" style="margin-bottom: 10px" :body-style="{padding:'10px'}">
      <div slot="header">
        <span>{{ $t('订单维度') }}</span>
      </div>
      <el-row :gutter="24" style="margin: 0">
        <el-col :span="16">
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('新增数') }}</div>
              <div class="num">{{ overViewData.newOrderNum }}</div>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('库存数') }}</div>
              <div class="num">{{ overViewData.stockOrderNum }}</div>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('总订单数') }}</div>
              <div class="num">{{ overViewData.totalOrderNum }}</div>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('新增结清数') }}</div>
              <div class="num">{{ overViewData.newOrderSettleNum }}</div>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('库存结清数') }}</div>
              <div class="num">{{ overViewData.stockOrderSettleNum }}</div>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('总结清数') }}</div>
              <div class="num">{{ overViewData.totalOrderSettleNum }}</div>
            </div>
          </el-col>
        </el-col>
        <el-col :span="8" :xs="12">
          <el-col :span="8" :xs="12">
            <div style="text-align:center;margin-top:30px">
              <el-progress :width="85" color="#52C0AD" type="circle"
                           :percentage="overViewData.newOrderSettleRate"></el-progress>
              <p style="fontSize:14px">{{ $t('新增结清率') }}</p>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div style="text-align:center;margin-top:30px">
              <el-progress :width="85" color="#4AAEFD" type="circle"
                           :percentage="overViewData.stockOrderSettleRate"></el-progress>
              <p style="fontSize:14px">{{ $t('库存结清率') }}</p>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div style="text-align:center;margin-top:30px">
              <el-progress :width="85" color="#FF9F23" type="circle"
                           :percentage="overViewData.totalOrderSettleRate"></el-progress>
              <p style="fontSize:14px">{{ $t('总结清率') }}</p>
            </div>
          </el-col>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never" :body-style="{padding:'10px'}">
      <div slot="header">
        <span>{{ $t('金额维度') }}</span>
      </div>
      <el-row :gutter="24" style="margin: 0">
        <el-col :span="16">
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('新增金额') }}</div>
              <div class="num">{{ overViewData.newAmount }}</div>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('库存金额') }}</div>
              <div class="num">{{ overViewData.stockAmount }}</div>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('总金额') }}</div>
              <div class="num">{{ overViewData.totalAmount }}</div>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('新增金额催回') }}</div>
              <div class="num">{{ overViewData.newAmountSettle }}</div>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('库存金额催回') }}</div>
              <div class="num">{{ overViewData.stockAmountSettle }}</div>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div class="overview_box">
              <div class="title">{{ $t('总金额催回') }}</div>
              <div class="num">{{ overViewData.totalAmountSettle }}</div>
            </div>
          </el-col>
        </el-col>
        <el-col :span="8" :xs="12">
          <el-col :span="8" :xs="12">
            <div style="text-align:center;margin-top:30px">
              <el-progress :width="85" color="#52C0AD" type="circle"
                           :percentage="overViewData.newAmountSettleRate"></el-progress>
              <p style="fontSize:14px">{{ $t('新增金额催回率') }}</p>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div style="text-align:center;margin-top:30px">
              <el-progress :width="85" color="#4AAEFD" type="circle"
                           :percentage="overViewData.stockAmountSettleRate"></el-progress>
              <p style="fontSize:14px">{{ $t('库存金额催回率') }}</p>
            </div>
          </el-col>
          <el-col :span="8" :xs="12">
            <div style="text-align:center;margin-top:30px">
              <el-progress :width="85" color="#FF9F23" type="circle"
                           :percentage="overViewData.totalAmountSettleRate"></el-progress>
              <p style="fontSize:14px">{{ $t('总金额催回率') }}</p>
            </div>
          </el-col>
        </el-col>
      </el-row>

    </el-card>
    <div style="margin-top: 15px;display: flex;">
      <el-card shadow="never" :body-style="{padding:'10px'}" style="width:64%;margin-right: 1%">
        <div slot="header">
          <span>{{ $t('工作质量') }}</span>
        </div>
        <el-tabs v-model="qualityActive" @tab-click="getQuality">
          <el-tab-pane :label="$t('天业绩')" name="1"></el-tab-pane>
          <el-tab-pane :label="$t('周业绩')" name="2"></el-tab-pane>
          <el-tab-pane :label="$t('月业绩')" name="3"></el-tab-pane>
          <Table :page="false" border :table-data="qualityTableData">
            <el-table-column :label="$t('时间')" align="center" prop="time"></el-table-column>
            <el-table-column :label="$t('总结清数')" align="center" prop="totalOrderSettleNum"></el-table-column>
            <el-table-column :label="$t('总结清率')" align="center" prop="totalOrderSettleRate"></el-table-column>
            <el-table-column :label="$t('总金额催回')" align="center" prop="totalAmountSettle"></el-table-column>
            <el-table-column :label="$t('总金额催回率')" align="center" prop="totalAmountSettleRate"></el-table-column>
          </Table>
        </el-tabs>
      </el-card>
      <el-card shadow="never" :body-style="{padding:'10px'}" style="width:35%">
        <div slot="header">
          <span>{{ $t('我的排行') }}</span>
        </div>
        <el-tabs v-model="rankActive" @tab-click="getRanking">
          <el-tab-pane :label="$t('总结清率')" name="1"></el-tab-pane>
          <el-tab-pane :label="$t('总金额催回率')" name="2"></el-tab-pane>
          <Table :page="false" border :tableColumn="rankTableColumn" :table-data="rankTableData">
          </Table>
        </el-tabs>
      </el-card>
    </div>

    <div style="margin-top: 15px;display: flex;">
      <el-card shadow="never" :body-style="{padding:'15px'}" style="width:100%;">
        <div slot="header">
          <span>{{ $t('曲线图') }}</span>
        </div>

        <div style="display:flex;justify-content: space-between">
          <el-tabs v-model="chartsActive" @tab-click="getCharts">
            <el-tab-pane :label="$t('总结清率')" name="0"></el-tab-pane>
            <el-tab-pane :label="$t('总金额催回率')" name="1"></el-tab-pane>
          </el-tabs>
          <div style="text-align: right">
            <el-radio-group v-model="chartsType" @change="getCharts" size="mini">
              <el-radio-button :label="0">{{ $t('近7天') }}</el-radio-button>
              <el-radio-button :label="1">{{ $t('近30天') }}</el-radio-button>
              <el-radio-button :label="2">{{ $t('近1年') }}</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <ve-line height="400px" :data="chartsData" :extend="chartsExtend"
                 :settings="amountSettings"
                 ref="charts"></ve-line>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  fetchCollectionHomeOverview,
  fetchCollectionWorkQuality,
  fetchCollectionMyRank,
  fetchCollectionCharts
} from '@/api/postLoan'
import VeLine from 'v-charts/lib/line.common'

export default {
  name: "personalData",
  components: {
    VeLine
  },
  props: {
    productName: {},
    guestGroupId: {}
  },
  data() {
    return {
      rankTableColumn: [
        {label: this.$t('类别'), prop: 'typeName', align: 'center'},
        {label: this.$t('组内排名'), prop: 'group', align: 'center'},
        {label: this.$t('公司排名'), prop: 'company', align: 'center'},
      ],
      rankTableData: [],
      qualityTableData: [],
      qualityData: [],
      chartsType: 0,
      overViewData: {},
      qualityActive: '1',
      rankActive: '1',
      chartsExtend: {
        color: ['#F1B901'],
        series: {
          smooth: false
        },
        grid: {
          right: 30
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#eeeeee'
            }
          },
          axisLabel: {}
        },
        tooltip: {
          formatter: (params) => {
            let res = '<div style="margin-bottom: 5px">' + params[0].axisValue + '</br>'
            for (let i = 0; i < params.length; i++) {
              res += params[i].marker + params[i].seriesName + ': ' + params[i].value[1] + '%' + '</br>'
            }
            return res + '</div>'
          }
        }
      },
      amountSettings: {
        yAxisName: [this.$t('单位') + ': %'],
        labelMap: {
          dateStr: this.$t('日期'),
          rate: this.$t('处理效率'),
        },
      },
      chartsData: {
        columns: ['dateStr', 'rate',],
        rows: []
      },
      chartsActive: '0'
    }
  },
  computed: {
    lastWeekPassRate() {
      const value = this.qualityData.find(item => item.type === 2)
      return value ? value.passRate : 0
    }
  },
  watch: {
    productName() {
      this.getData()
    },
    guestGroupId: {
      handler(value) {
        if (value) {
          this.getData()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    getData() {
      this.getQuality()
      this.getOverView()
      this.getRanking()
      this.getCharts()
    },
    // 获取今日总览
    async getOverView() {
      const res = await fetchCollectionHomeOverview({
        productName: this.productName || null,
        guestGroupId: this.guestGroupId
      })
      if (res.code === 1) {
        this.overViewData = {
          ...res.data,
          newAmountSettleRate: parseFloat(res.data.newAmountSettleRate),
          newOrderSettleRate: parseFloat(res.data.newOrderSettleRate),
          stockAmountSettleRate: parseFloat(res.data.stockAmountSettleRate),
          stockOrderSettleRate: parseFloat(res.data.stockOrderSettleRate),
          totalAmountSettleRate: parseFloat(res.data.totalAmountSettleRate),
          totalOrderSettleRate: parseFloat(res.data.totalOrderSettleRate),
        }
      }
    },
    // 获取工作质量
    async getQuality() {
      const res = await fetchCollectionWorkQuality({
        productName: this.productName || null, guestGroupId: this.guestGroupId,
        briefType: this.qualityActive === '1' ? 0 : this.qualityActive === '2' ? 1 : 2
      })
      if (res.code === 1) {
        const data = res.data
        const dateTitle = {
          'day1': this.$t('今日'),
          'day2': this.$t('本周'),
          'day3': this.$t('本月'),
          'yesterday1': this.$t('昨日'),
          'yesterday2': this.$t('上周'),
          'yesterday3': this.$t('上月'),
        }
        const dataValue1 = this.qualityActive === '1' ? 'today' : this.qualityActive === '2' ? 'thisWeek' : 'thisMonth'
        const dataValue2 = this.qualityActive === '1' ? 'yesterday' : this.qualityActive === '2' ? 'lastWeek' : 'lastMonth'
        this.qualityTableData = [
          {
            time: dateTitle['day' + this.qualityActive],
            totalOrderSettleNum: data[dataValue1].totalOrderSettleNum,
            totalOrderSettleRate: data[dataValue1].totalOrderSettleRate + '%',
            totalAmountSettle: data[dataValue1].totalAmountSettle,
            totalAmountSettleRate: data[dataValue1].totalAmountSettleRate + '%',
          },
          {
            time: dateTitle['yesterday' + this.qualityActive],
            totalOrderSettleNum: data[dataValue2].totalOrderSettleNum,
            totalOrderSettleRate: data[dataValue2].totalOrderSettleRate + '%',
            totalAmountSettle: data[dataValue2].totalAmountSettle,
            totalAmountSettleRate: data[dataValue2].totalAmountSettleRate + '%',
          }
        ]
      }
    },
    // 获取个人排名
    async getRanking() {
      const res = await fetchCollectionMyRank({
        productName: this.productName || null,
        guestGroupId: this.guestGroupId,
        type: this.rankActive === '1' ? 0 : 1
      })
      if (res.code === 1) {
        // 获取订单结清
        const orderRate = [
          {
            typeName: this.$t('上周总结清率'),
            company: res.data.lastWeekComprehensiveRate.company,
            group: res.data.lastWeekComprehensiveRate.group
          },
          {
            typeName: this.$t('本周总结清率'),
            company: res.data.thisWeekComprehensiveRate.company,
            group: res.data.thisWeekComprehensiveRate.group
          },
        ]
        // 获取金额结清
        const amountRate = [
          {
            typeName: this.$t('上周总金额催回率'),
            company: res.data.lastWeekComprehensiveRate.company,
            group: res.data.lastWeekComprehensiveRate.group
          },
          {
            typeName: this.$t('本周总金额催回率'),
            company: res.data.thisWeekComprehensiveRate.company,
            group: res.data.thisWeekComprehensiveRate.group
          },
        ]
        const data = this.rankActive === '1' ? orderRate : amountRate
        this.rankTableData = data
      }
    },
    // 获取个人曲线图
    async getCharts() {
      const res = await fetchCollectionCharts({
        productName: this.productName || null,
        dateType: this.chartsType,
        authType: 0,
        dataType: parseInt(this.chartsActive),
        guestGroupId: this.guestGroupId
      })
      if (res.code === 1) {
        this.chartsData.rows = res.data
        this.$set(this.amountSettings.labelMap, 'rate', this.chartsActive === '0' ? this.$t('总结清率') : this.$t('总金额催回率'))
        this.$refs.charts.resize()
      }
    },
  }
}
</script>

<style scoped lang="less">
.overview_box {
  padding: 10px;

  .title {
    margin-bottom: 8px;
    color: #5A5C61;
    font-size: 14px;
  }

  .num {
    font-size: 26px;
    font-family: DIN-Bold, DIN;
    font-weight: bold;
    color: #282828;
  }
}

</style>
